<!-- 支付订单 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="支付订单" :borderBottom="false"></u-navbar>
		<view class="tips">请支付</view>
		<view class="price">￥{{money}}</view>
		<view class="payType">支付方式</view>
		<view class="type flex_bet_align" @click="chooseType(3)">
			<view class="flex_align">
				<u-icon name="minus-square-fill" color="#FF623E" size="36"></u-icon>
				<view class="name">余额支付</view>
			</view>
			<view class="iconfont" :class="type==3?'icon-xuanzhong':'icon-xuanzhongyuandian'"></view>
		</view>
		<view class="type flex_bet_align" @click="chooseType(1)">
			<view class="flex_align">
				<u-icon name="weixin-fill" color="#09BB07" size="36"></u-icon>
				<view class="name">微信支付</view>
			</view>
			<view class="iconfont" :class="type==1?'icon-xuanzhong':'icon-xuanzhongyuandian'"></view>
		</view>
		<view class="type flex_bet_align" @click="chooseType(2)">
			<view class="flex_align">
				<u-icon name="zhifubao-circle-fill" color="#06B4FD" size="36"></u-icon>
				<view class="name">支付宝支付</view>
			</view>
			<view class="iconfont" :class="type==2?'icon-xuanzhong':'icon-xuanzhongyuandian'"></view>
		</view>
		<view class="payNow" @click="submit">立即支付</view>
	</view>
</template>

<script>
	var _this, shak;
	export default {
		data() {
			return {
				//付款类型
				type: 3,
				//支付金额
				money: 0,
				// 余额
				// balance:0,
				mid: 0,
				type_id: 0,
			}
		},
		onLoad(options) {
			_this = this
			_this.mid = options.mid
			_this.type_id = options.type_id
			_this.money = options.money
		},
		methods: {

			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},

			submit() {
				let info = {}
				if (_this.type == 1 || _this.type == 3) {
					info = {
						mid: _this.mid,
						money: _this.money,
						type_id: _this.type_id,
						pay_type: _this.type,
						pay_tuneup_type: 2
					}
				} else {
					info = {
						mid: _this.mid,
						money: _this.money,
						type_id: _this.type_id,
						pay_type: _this.type,
					}
				}
				_this.click_shake(() => {
					_this.$api.post("playmember", info).then(data => {
						if (_this.type == 3) {
							wx.showModal({
								title: '提示',
								content: '支付成功',
								showCancel: false,
								success: function(res) {
									_this.$plug.isonshow(3)
									wx.navigateBack({
										delta: 2
									})
								}
							})
						} else if (_this.type == 2) {
							console.log(data)
							// console.log(data.info.substring(35))
							
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: data.info,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						} else if (_this.type == 1) {
							console.log(data)
							uni.requestPayment({
								"provider": "wxpay",
								"orderInfo": {
									"appid": data.appid,
									"noncestr": data.noncestr,
									"package": data.package,
									"partnerid": data.partnerid,
									"prepayid": data.prepayid,
									"timestamp": data.timestamp,
									"sign": data.sign
								},
								success: function(res) {
									console.log(res)
									wx.showModal({
										title: '提示',
										content: '支付成功',
										showCancel: false,
										success: function(res) {
											_this.$plug.isonshow(3)
											wx.navigateBack({
												delta: 2
											})
										}
									})
								},
								fail: function(res) {
									wx.showModal({
										title: '提示',
										content: '购买人数过多，等待一下再支付',
										showCancel: false
									})
								}
							});
						}
					});
				})
			},

			chooseType(e) {
				this.type = e
			}


		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: PingFang SC;
	}

	.tips {
		font-size: 28rpx;
		font-weight: 700;
		text-align: center;
		color: #292833;
		margin: 33rpx 0 22rpx;
	}

	.price {
		font-size: 46rpx;
		font-weight: 500;
		text-align: center;
		color: #38be8c;
	}

	.countdown {
		width: 500rpx;
		margin: 22rpx auto 44rpx;
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
		color: #999999;
		line-height: 30rpx;
	}

	.payType {
		height: 98rpx;
		font-size: 24rpx;
		font-weight: 400;
		text-align: left;
		color: #999999;
		line-height: 98rpx;
		padding-left: 30rpx;
		background-color: #F8F8F8;
	}

	.type {
		height: 119rpx;
		padding: 42rpx 30rpx 38rpx 30rpx;
		border-bottom: 1rpx solid #EEEEEE;

		.name {
			margin-left: 14rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.iconfont {
			color: #999999;
			font-size: 36rpx;
		}

		.icon-xuanzhong {
			color: #38BE8C;
		}
	}

	.payNow {
		width: 690rpx;
		height: 90rpx;
		margin: 70rpx auto 0;
		background: linear-gradient(86deg, #37bd8d 3%, #06adb9 97%);
		border-radius: 46rpx;
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
	}
</style>
